<template>
  <div>
    <a-tabs>
      <a-tab-pane key="clock" tab="时钟">
        <button @click="destroyClock = !destroyClock">
          {{ destroyClock ? "加载时钟" : "销毁时钟" }}
        </button>
        <Clock v-if="!destroyClock" />
      </a-tab-pane>
      <a-tab-pane key="Functional" tab="函数式组件">
        <Functional :name="name" />
        <!-- 函数式组件 -->
        <TempVar
          :var1="`hello ${name}`"
          :var2="destroyClock ? 'hello vue' : 'hello world'"
        >
          <template v-slot="{ var1, var2 }">
            {{ var1 }}
            {{ var2 }}
          </template>
        </TempVar>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
// 生命周期分为三个阶段
// 1. 创建阶段（仅执行一次）：初始化事件和生命周期,
//    1.1 beforeCreate, 处理响应式数据、属性、监听器配置等,
//    1.2 created, 模板编译到
//    1.3 render（直接写 render 函数跳过 xx 阶段）,
//    1.4 beforeMount,
//    1.5 render,
//    1.6 mounted（异步请求、操作 dom、定时器等）
// 2. 更新阶段（执行多次）：beforeUpdate（移除已经添加的事件监听器等，不可更改响应式数据）, render, updated（操作 dom 添加事件监听器等，不可更改响应式数据）
// 3. 销毁阶段（仅执行一次）：beforeDestory（移除已经添加的事件监听器，计时器等）, destroyed
import Clock from "./Clock";
import Functional from "./Functional";
import TempVar from "./TempVar";
export default {
  components: {
    Clock,
    Functional,
    TempVar
  },
  data() {
    return {
      destroyClock: false,
      name: "vue"
    };
  }
};
</script>
